<template>
    <div class="succeed-wrap">
        <div class="succeed-step">
            <Step :active="active"/>
        </div>
        <div class="succeed-box">
            <dl class="succeed-msg">
                <dt>
                    <img :src="require('../assets/images/succeed.png')" alt/>
                </dt>
                <dd>{{$t('addMsg.tjcgdd')}}</dd>
            </dl>

            <div class="succeed-btn">
                <van-button
                        type="primary"
                        size="large"
                        color="linear-gradient(90deg, #FFB301 0%, #FE8C01 100%)"
                        round
                        @click="routerAchievementsDetail"
                >{{$t('message.cksbxq')}}
                </van-button>
                <van-button size="large" round @click="routerHome">{{$t('addMsg.ffsy')}}</van-button>
            </div>
        </div>
    </div>
</template>

<script>
    import Step from '@/components/StepBar'

    export default {
        computed: {
            query () {
                return this.$route.query
            },
            id () {
                return this.query.id
            },
            title () {
                return this.query.title;
            },
        },
        components: {
            Step
        },
        data () {
            return {
                active: 3
            }
        },
        methods: {
            routerAchievementsDetail () {
                // 跳成果详情
                if (this.title === 'RELEASE') {
                    this.$router.push({
                        path: '/achievementsDetail',
                        query: {
                            id: this.id
                        }
                    })
                }
                // 跳合同详情
                else if (this.title === 'CONTRACT') {
                    this.$router.push({
                        path: '/contractDetail',
                        query: {
                            id: this.id
                        }
                    })
                }

            },
            routerHome () {
                this.$router.push({
                    path: '/home'
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .succeed-wrap {
        width: 100%;
        height: 100%;
        overflow-y: auto;
        /*background: rgba(243, 246, 250, 1);*/
        /*padding: 15px;*/
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        flex-direction: column;
        padding: 15px;
    }

    .succeed-box {
        margin-top: 15px;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .succeed-msg {
            width: 100%;
            height: 215px;
            background: #fff;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            padding: 15px;

            dt {
                width: 70px;
                height: 70px;
                border-radius: 50%;
                text-align: center;
                line-height: 70px;
                background-image: linear-gradient(90deg, #ffb301 0%, #fe8c01 100%);

                img {
                    width: 100%;
                    height: 100%;
                    display: block;
                }
            }

            dd {
                margin-top: 20px;
                font-size: 18px;
                color: #212121;
                text-align: center;
                word-wrap:break-word;
            }
        }
    }

    .succeed-btn {
        padding: 30px;

        .van-button {
            margin-top: 15px;

            &.van-button--default {
                border-color: #cccfd4;
            }
        }
    }
</style>
